<template>
  <div class="work-default">
    <form class="form-horizontal" onsubmit="return false;" ref="pswdform">
      <div class="form-group">
        <label class="col-sm-2 control-label">帐&emsp;&emsp;号</label>
        <div class="col-sm-3">
          <p class="form-control-static">{{ currentAccount }}</p>
        </div>
      </div>
      <div class="form-group">
        <label for="oldPassword" class="col-sm-2 control-label is-required">旧&ensp;密&ensp;码</label>
        <div class="col-sm-3">
          <input class="form-control" type="password" id="oldPassword" v-model="formData.oldPassword" placeholder="请输入旧密码" aria-required="true" maxlength="30">
        </div>
      </div>
      <div class="form-group">
        <label for="newPassword" class="col-sm-2 control-label is-required">新&ensp;密&ensp;码</label>
        <div class="col-sm-3">
          <input class="form-control" type="password" id="newPassword" v-model="formData.newPassword" placeholder="请输入新密码" aria-required="true" aria-minlength="6" maxlength="30" >
        </div>        
      </div>
      <div class="form-group">
        <label for="confirmPassword" class="col-sm-2 control-label is-required">确认密码</label>
        <div class="col-sm-3">
          <input class="form-control" type="password" id="confirmPassword" v-model="formData.confirmPassword" placeholder="请输入确认密码" aria-required="true" aria-minlength="6" maxlength="30">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary btn-lg" @click="doChangePswd">提交</button>
        </div>
      </div>
    </form>    
  </div>  
</template>

<script>
import {validationTool, messageTool} from '../common/tools'
export default {
  name: 'changePassword',
  mounted: function () {
    var self = this;
    this.$nextTick(function () {
      // 页面加载完毕事件
      self.$unlockButton('password-form');
      $('#messageModal').on('hidden.bs.modal', function (e) {
        if ($('#opt-result').val() == '0') {
          self.clearForm();
        }
      });
    }); 
  },
  activated() {
    if (this.$store.state.tabRefresh[this.$route.path]) {
      this.clearForm();
    }
  },
  computed: {
    currentAccount: function () {
      return this.$getStorage('userName');
    }
  },
  props: ['breadCrumb'],
  methods: {
    clearForm() {
      for (var key in this.formData) {
        this.formData[key] = '';
      }
      validationTool.clear('#oldPassword');
      validationTool.clear('#newPassword');
      validationTool.clear('#confirmPassword');
    },
    doChangePswd: function() {
      var self = this;
      if (self.$isLockedButton('password-form')) {
        return;
      }
      // 表单校验....
      if (! validationTool.form(self.$refs.pswdform)) {
        return;
      }
      if (self.formData.confirmPassword != self.formData.newPassword) {
        validationTool.show('#confirmPassword', '确认密码与新密码不一致');
        return;
      }
      // 表单提交
      self.$lockButton('password-form');
      self.$loadShow('保存中');
      self.$doPost('/admin/password/change', self.formData, function(resp) {
        $('#opt-result').val(resp.code);
        self.$loadHide();
        messageTool.show(resp.code === 0 ? '操作成功！' : ('操作失败！<br>原因：' + resp.message));
        self.$unlockButton('password-form');
      });
    }
  },
  data () {
    return {
      formData: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  }
}
</script>

